<template>
  <div class="milestone">
    <div class="vertical-line" />
    <div class="finacing-item">
      <el-row :gutter="0" v-for="item in 4" :key="item">
        <el-col :span="6">2024-01-02</el-col>
        <el-col :span="18">外观惊艳、信号改善！你理想中的 iPhone，已在路上</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Milestone"
}
</script>

<style scoped lang="scss">
.milestone {
  width: 100%;
  height: auto;
  background: #F9FAFC;
  padding: 24px;
  position: absolute;
  .vertical-line {
    width: 1px;
    height: calc(100% - 60px);
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    background: #165DFF;
  }
  .finacing-item {
    padding-left: 28px;
    .el-row {
      position: relative;
      margin-bottom: 100px;
      &:last-child {
        margin-bottom: 0;
      }
      &::before {
        content: ' ';
        display: block;
        width: 10px;
        height: 10px;
        background: #165DFF;
        border-radius: 100%;
        position: absolute;
        left: -32px;
        top: 3px;
      }
      .el-col {
        font-size: 14px;
        font-weight: 400;
        color: #1D2129;
      }
    }
  }
}
</style>
